<template>
  <template v-if="pageChildConfig && pageChildConfig.childList">
    <!-- 大屏布局子容器 -->
    <lsd-layout-child-container
      v-for="child in pageChildConfig.childList"
      :key="child.id"
      :spanNum="spanNum"
      :span="child.span"
      :style="child.style"
    >
      <!-- 业务组件 -->
      <async-load-component
        v-if="child.component"
        :component="child.component"
        :key="child.component"
        v-bind="child.componentProps || {}"
        :config="child"
        :transitionType="transitionType"
        @setDetail="setDetail"
        :class="{
          'second-active': currentSecondName === child.secondName
        }"
      />
    </lsd-layout-child-container>
  </template>
</template>

<script setup>
/**
 * 母版子视图
 * @author 朱琦
 * @date   时间：2022/10/19
 */
import AsyncLoadComponent from '../components/AsyncLoadComponent.vue'
import { useStore } from 'vuex'
import { computed, ref, watch } from 'vue'

const props = defineProps({
  spanNum: {
    type: Number,
    default: 24
  },
  transitionType: {
    type: String,
    default: 'right'
  }
})

const store = useStore()
// 当前选中组件名
const currentSecondName = ref(null)
// 获取子页面配置
const pageChildConfig = computed(() => store.getters['config/pageChildConfig'])
console.log('pageChildConfig', pageChildConfig.value)

const getData = () => {}

/**
 * 设置详情配置
 * @param {Object} data
 */
const setDetail = data => {
  store.commit('config/SET_DETAIL_CONFIG', data)
}

watch(
  () => store.state.config.detailConfig.type,
  newValue => (currentSecondName.value = newValue),
  { deep: true }
)
</script>
<style scoped lang="less"></style>
